// 首页
<template>
	<div id="main">
		<div class="huodong">
			<img src="../assets/main/头部.png" alt="">
			<div class="top">
				<img src="../assets/main/adress.png" />

				<span>北京理工大学国防科技园2号楼10层</span>

				<img src="../assets/home/tab_home.png" />
			</div>

			<div class="input_div">
				<input type="text" placeholder="山姆会员商店优惠商品" />
			</div>

			<div class="img_div">
				<img src="../assets/main/logo-huodong.png" />
			</div>

			<div class="img_kj_div" v-for="item in datalist_kj">
				<div class="kuaijie_div" v-for="i in item.imgs">
					<img :src="i.url" />
					<p>{{ i.name }}</p>
				</div>
			</div>
		</div>

		<div class="fujin">
			<p class="text">附近店铺</p>

			<div v-for="itme in datalist_dianpu">
				<div class="dianpu" v-for="it in itme.shops">
					<div class="dianpu_logo">
						<img :src="it.imgs" />
					</div>

					<div class="dianpu_jianjie">
						<p>{{ it.text1 }}</p>

						<div class="jianjie_div" v-for="aa in it.jianjie">
							<span>{{ aa.sp1 }}</span>

							<span>{{ aa.sp2 }}</span>

							<span>{{ aa.sp3 }}</span>
						</div>

						<p class="vip_p">{{ it.vipyouhui }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>



<script>
	export default {
		data() {
			return {
				datalist_kj: [{
						imgs: [{
								url: require("../assets/main/超市@2x.png"),

								name: "超市便利",
							},

							{
								url: require("../assets/main/菜市场@2x.png"),

								name: "菜市场",
							},

							{
								url: require("../assets/main/水果店@2x.png"),

								name: "水果店",
							},

							{
								url: require("../assets/main/鲜花@2x.png"),

								name: "鲜花绿植",
							},

							{
								url: require("../assets/main/医药健康@2x.png"),

								name: "医药健康",
							},
						],
					},

					{
						imgs: [{
								url: require("../assets/main/家居@2x.png"),

								name: "家居时尚",
							},

							{
								url: require("../assets/main/蛋糕@2x.png"),

								name: "烘培蛋糕",
							},

							{
								url: require("../assets/main/签到@2x.png"),

								name: "签到",
							},

							{
								url: require("../assets/main/大牌免运@2x.png"),

								name: "大牌免运",
							},

							{
								url: require("../assets/main/红包@2x.png"),

								name: "红包套餐",
							},
						],
					},
				],

				datalist_dianpu: [{
						shops: [{
							imgs: require("../assets/main/沃尔玛@2x.png"),

							text1: "沃尔玛",

							jianjie: [{
								sp1: "月售1万+",

								sp2: "起送¥0",

								sp3: "基础运费¥5",
							}, ],

							vipyouhui: "VIP尊享满89元减4元运费券（每月3张）",
						}, ],
					},
					{
						shops: [{
							imgs: require("../assets/main/山姆会员商店@2x.png"),

							text1: "山姆会员商店",

							jianjie: [{
								sp1: "月售1万+",

								sp2: "起送¥0",

								sp3: "基础运费¥5",
							}, ],

							vipyouhui: "VIP尊享满89元减4元运费券（每月3张）",
						}, ],
					},
				],
			};
		},
	};
</script>



<style>
	/* 单独给页面设置背景色 */

	#main {
		background-color: #f8f8f8;

		height: 100%;

		position: fixed;

		width: 100%;
	}

	.huodong {
		height: 378px;
		background-color: white;
	}

	.huodong img {
		height: 20px;
		width: 375px;
	}

	.top {
		height: 22px;
		padding-top: 16px;

		padding-left: 19.2px;

		padding-right: 19.3px;

		display: flex;

		align-items: center;
	}

	.top span {
		font-size: 16px;

		color: #333333;

		flex: 20;

		padding-left: 9.7px;
	}

	.top :nth-child(1) {
		width: 13.1px;

		height: 16.2px;
	}

	.top :nth-child(3) {
		width: 16.5px;

		height: 15.5px;
	}

	.input_div {
		padding-left: 18px;

		padding-right: 18px;

		display: flex;

		padding-top: 16px;
	}

	.input_div input {
		flex: 1;

		height: 32px;

		border: none;

		background: #f5f5f5;

		border-radius: 16px;

		padding-left: 44px;
	}

	.img_div {
		padding-left: 18px;

		padding-right: 18px;

		padding-top: 12px;

		display: flex;
	}

	.img_div img {
		flex: 1;

		height: 86px;
	}

	.img_kj_div {
		padding-left: 20px;

		padding-right: 20px;

		padding-top: 16px;

		display: flex;

		align-items: center;
	}

	.img_kj_div .kuaijie_div {
		flex: 20;

		text-align: center;
	}

	.kuaijie_div img {
		width: 40px;

		height: 40px;
	}

	.fujin {
		margin-top: 10px;
		background: white;
		padding-left: 18px;
	}

	.fujin .text {
		font-size: 18px;
		color: #333333;
	}

	.dianpu {
		display: flex;

		padding-top: 14px;
	}

	.dianpu_logo img {
		width: 56px;

		height: 56px;
	}

	.dianpu_jianjie {
		flex: 1;

		padding-left: 16px;
	}

	.dianpu_jianjie p {
		font-size: 16px;

		color: #333333;
	}

	.dianpu_jianjie div {
		padding-top: 8px;
	}

	.jianjie_div span {
		font-size: 13px;

		color: #333333;

		padding-right: 16px;
	}

	.fujin .vip_p {
		font-size: 13px;

		color: #e93b3b;

		padding-top: 8px;

		padding-bottom: 12px;

		border-bottom: #f1f1f1 solid 1px;
	}
</style>
